<template>
	<el-dialog v-model="props.isShow" width="30%" @close="handleClose" @open="handleOpen">
		<div class="flex flex-col items-center mb-20px">
			<div class="rounded-50% w-260px h-260px bg-#4E5969">
				<video autoplay ref="video" class="rounded-50% w-full h-full object-cover"> </video>
			</div>
			<p class="mt-40px text-18px">请对准摄像头</p>
			<p class="mt-10px text-14px text-#86909C">请启用当前浏览器的摄像头访问权限，刷新并重试</p>
		</div>
	</el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, ref, onUnmounted } from "vue";
interface IProps {
	isShow: boolean;
}

const props = defineProps<IProps>();
const video = ref<any>();
const emits = defineEmits(["close"]);
// 调用摄像头
const getUserMedia = () => {
	navigator.mediaDevices.getUserMedia({ video: true })
		.then(stream => {
			video.value.srcObject = stream;
		console.log(video.value)

		})
		.catch(err => {
			console.log(err);
		});
};

const clearVideo = () => {
	console.log(video.value)
  const stream = video.value.srcObject;
  const tracks = stream.getTracks();
  tracks.forEach((track:any) => {
    track.stop();
  });
  video.value.srcObject = null;
}

const handleClose = ()=>{
	clearVideo();
	emits('close',false)
}
const handleOpen = () => {
	getUserMedia();
}
</script>
